<template>
	  <view class="pay-top">
	    <view class="pay-shop-info">
	      <view class="content">
	        <image class="shop-logo" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/common/i_logo.png"></image>
	        <text class="shop-name">{{ OrgName }}</text>
	      </view>
	    </view>
	    <view class="pay-input-money">
	      <view class="money-top">
	        <view class="money-top-left">商品详情</view>
	        <view class="money-top-right">{{ OrgName }}</view>
	      </view>
	      <view class="money-center">
	        <view class="money-center-top">订单金额：</view>
	        <view class="money-center-main">
	          <view class="main-icon" style="width:10%">￥</view>
	          <input
	            class="main-input"
	            id="paymoney"
	            :value="price"
	            disabled
	            placeholder="请输入订单金额"
	            placeholder-style="color: #999999;"
	            style="width:90%"
	          />
	        </view>
	        <view class="money-center-footer">
	          <view class="footer-left">付款附言</view>
	          <input
	            class="footer-right"
	            placeholder-style="color: #999999;"
	            v-model="remark"
	            placeholder="商户可见，不超过40字"
	          />
	        </view>
	      </view>
	      <view class="money-footer"></view>
	    </view>
	    <view class="pay-tip">
	      <view class="pay-tip-icon"></view>
	      请核对以上金额、收款商户等信息与交易一致;经您确认支付的款项，支付机构无法追回亦无赔偿义务。
	    </view>
	  </view>
	  <view class="payinfo">
	    <view class="table">
	      <view class="table-title">
	        由
	        <text class="table-title-value">极兔妙创</text>
	        提供支付服务
	      </view>
	      <view class="tr">
	        <view @tap="paynum(1)" class="td" data-value="1">1</view>
	        <view @tap="paynum(2)" class="td" data-value="2">2</view>
	        <view @tap="paynum(3)" class="td" data-value="3">3</view>
	        <view class="td">
	          <view @tap="paydel" class="keybord-return"></view>
	        </view>
	      </view>
	      <view class="tr">
	        <view style="width: 75%;">
	          <view class="tr">
	            <view @tap="paynum(4)" class="threetd" data-value="4">4</view>
	            <view @tap="paynum(5)" class="threetd" data-value="5">5</view>
	            <view @tap="paynum(6)" class="threetd" data-value="6">6</view>
	          </view>
	          <view class="tr">
	            <view @tap="paynum(7)" class="threetd" data-value="7">7</view>
	            <view @tap="paynum(8)" class="threetd" data-value="8">8</view>
	            <view @tap="paynum(9)" class="threetd" data-value="9">9</view>
	          </view>
	          <view class="tr">
	            <view @tap="paynum(0)" class="td zero" data-value="0">0</view>
	            <view @tap="paynum('.')" class="threetd" data-value=".">.</view>
	          </view>
	        </view>
	        <view
	          :style="ispay ? 'background-color: #212121;' : 'background-color: #f6f6f6;'"
	          style="width: 25%;"
	        >
	          <view
	            @tap="pay"
	            :class="ispay ? 'pay' : 'pay pay-disabled'"
	          >
	            <view class="a">
	              <view class="a-pay">
	                <view>
	                  <view
	                    class="pay-title"
	                    :style="ispay ? 'color:#f6f6f6;' : 'color:#212121;'"
	                  >
	                    付款
	                  </view>
	                </view>
	              </view>
	            </view>
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
</template>

<script setup>
	import { onLoad, onReachBottom, onPullDownRefresh, onShow, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import wx from "weixin-js-sdk";
	
	   
	    const OrgName = ref('');
	    const OrgCode = ref('+xt/gTpx29Q=');
	    const price = ref('');
	    const ispay = ref(false);
	    const OpenId = ref('');
	    const remark = ref('');
	    
	    const paydel = () => {
		    var oldnum = price.value;
		    if (oldnum.length > 0) {
		         var num = oldnum.substring(0, oldnum.length - 1);
				 price.value = num
				 
		         if (checkPrice(num, 2)) {
		            ispay.value = true
		         } else {
		           ispay.value = false
		         }
		       }
	    };
		
		const checkPrice = (value, type) =>{
		    var reg = /^[+-]?[1-9]?[0-9]*\.[0-9]*$/,
		      reg1 = /^[0-9]*[1-9][0-9]*$/;
		    if (!reg1.test(value) && !reg.test(value) && value !== "0") {
		      return false;
		    } else if (
		      (reg.test(value) && value.split(".")[1].length > 2) ||
		      (value * 1 < 0.01 && type == 2) ||
		      (reg.test(value) && value.split(".")[1].length == 0)
		    ) {
		      return false;
		    }
		    return true;
		  }
	    
	    
	     const paynum = (e) =>{
	        var value = price.value
	        var num = e;
	        if (value.length < 8 && validatePrice(num)) {
	          var afterVal = value + num;
			  price.value = afterVal
	          if (checkPrice(afterVal, 2)) {
				   ispay.value = true
	          } else {
	               ispay.value = false
	          }
	        }
	    }	
		
	    const validatePrice = (num) => {
	      const value = price.value;
	      const checkMoney = value.split('');
	      if (
	        (checkMoney.indexOf('.') > -1 && num === '.') ||
	        (checkMoney.length === 0 && num === '.') ||
	        (checkMoney[0] === '0' && checkMoney.length === 1 && num !== '.') ||
	        (value + num).split('.')[1]?.length > 2
	      ) {
	        return false;
	      }
	      return true;
	    };
	    
	    const bindinfo = async () => {
	      try {
	        const response = await fetch('https://jtmc.ltd:9010/api/Org/GetOrgInfo', {
	          method: 'POST',
	          headers: { 'Content-Type': 'application/json' },
	          body: JSON.stringify({ Key: OrgCode.value }),
	        });
	        const data = await response.json();
	        if (data.State) {
	          OrgName.value = data.Data.model.OrgName;
	        }
	      } catch (error) {
	        console.error('Failed to fetch organization info:', error);
	      }
	    };
	    
	    // 支付
	    const pay = async () => {
	      if (checkPrice(price.value, 2)) {
	        try {
			 
	          const paymentResponse = await fetch('https://jtmc.ltd:9010/api/Org/WeChatMiniProgramPay', {
	            method: 'POST',
	            headers: { 'Content-Type': 'application/json' },
	            body: JSON.stringify({
	              // code: loginRes.code,
	              code: uni.getStorageSync('userInfo')?.unionID, 
	              Total: price.value,
	              Key: OrgCode.value,
	              OpenId: OpenId.value,
	              Remarks: remark.value,
	            }),
	          });
			  
			  
	          const paymentData = await paymentResponse.json();
			  
			  console.log(paymentData,'paymentData')
	          
	          if (paymentData.State) {
	            const model = paymentData.Data;
	            wx.requestPayment({
	              nonceStr: model.parameter.nonceStr,
	              package: model.parameter.package,
	              paySign: model.parameter.paySign,
	              timeStamp: model.parameter.timeStamp,
	              signType: model.parameter.signType,
	              success: (payres) => {
					uni.showToast({ title: '支付成功', icon: 'none' })
	              },
	              fail: (payerr) => {
	                uni.showToast({ title: payerr, icon: 'none' });
	              },
	            });
	          } else {
	            uni.showToast({
	              title: paymentData.Message,
	              // title:'paymentData',
	              icon: 'none',
	            });
	          }
	        } catch (error) {
	          uni.showToast({
	            title: '支付失败，请重试',
	            icon: 'none',
	          });
	          console.error('Payment error:', error);
	        }
	      } else {
	        uni.showToast({
	          title: '金额不正确',
	          icon: 'none',
	        });
	      }
	    };

	   
	    onLoad((options) => {
			  if(options.OrgCode) {
				   OrgCode.value = options.OrgCode
				     bindinfo();
			  } else {
				     bindinfo();
			  }
		
			    //console.log(window.location.href,'urlParams')
			    //   var link = window.location.href;
			    //   var index = link.indexOf("OrgCode");
			    //   if (index > -1) {
			    //     var code = link.substring(index + 8);
			     //     OrgCode.value = code
			    //       bindinfo();
			    //   }
			    // } else {
			    //     bindinfo();
			    // }  
			  
	    });
	   
</script>

<style lang="scss">
	.pay-shop-info {
	  width: 100%;
	  margin-bottom: 0.2rem;
	  /* display: flex; */
	  margin-left: 24px;
	  justify-content: center;
	}
	
	.pay-shop-info .content {
	  padding-top: 0.3rem;
	  display: flex;
	  margin: 0 auto;
	  align-items: center;
	}
	
	.pay-shop-info .shop-logo {
	  width: 100rpx;
	  height: 100rpx;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  border-radius: 50%;
	}
	
	.pay-shop-info .shop-name {
	  flex: auto;
	  font-size: 32rpx;
	  margin-left: 0.2rem;
	  color: #2f323a;
	  display: flex;
	  line-height: 32rpx;
	  align-items: center;
	  font-weight: 700;
	}
	
	.pay-input-money {
	  background-color: #ffffff;
	  margin: 0 24rpx;
	  padding: 24rpx 24rpx 0 24rpx;
	  /* width: 65vw;
	    height: 7vh;
	    line-height: 7vh;
	    margin: 0 auto;
	    border: 1px solid #fe9b20;
	    -webkit-border-radius: 0.5px;
	    -moz-border-radius: 0.5px;
	    border-radius: 0.5px;
	    background: #fff; */
	}
	.pay-input-money .money-top{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  border-bottom: 1px dashed #d5d5d5;
	  padding-bottom: 30rpx;
	}
	.money-top .money-top-left{
	  font-family: PingFang SC;
	  font-weight: 500;
	  font-size: 30rpx;
	  color: #212121;
	  line-height: 30rpx;
	}
	.money-center-top{
	  font-family: PingFang SC;
	  font-weight: 500;
	  font-size: 30rpx;
	  color: #212121;
	  line-height: 30rpx;
	}
	.money-top .money-top-right{
	  font-family: PingFang SC;
	  font-weight: 500;
	  font-size: 30rpx;
	  color: #666666;
	  line-height: 30rpx;
	}
	.pay-input-money .money-center{
	  padding: 24rpx 12rpx;
	}
	.pay-input-money .money-center-main{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 34rpx 0;
	  font-size: 46rpx;
	  line-height: 46rpx;
	  border-bottom: 1px dashed #d5d5d5;
	}
	.money-center-main .main-icon{
	  font-family: PingFang SC;
	  font-weight: 500;
	  font-size: 46rpx;
	  color: #212121;
	  line-height: 46rpx;
	}
	.money-center-footer{
	  padding-top: 16rpx;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.money-center-footer .footer-left{
	  font-family: PingFang SC;
	  font-weight: 500;
	  font-size: 28rpx;
	  color: #212121;
	  line-height: 28rpx;
	}
	.money-center-footer .footer-right{
	    width: 50%;
	    font-size: 28rpx;
	    color: #212121;
	    line-height: 28rpx;
	    /* #999999 */
	}
	/* .main-input{
	  color: #999999;
	  bold
	} */
	.main-input::placeholder{
	  color: #999999;
	}
	.pay-tip{
	  padding: 20rpx 30rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  font-size:26rpx;
	  color: #666666;
	  line-height: 40rpx;
	  display: flex;
	  padding-left: 60rpx;
	  position: relative;
	}
	.pay-tip-icon{
	  width: 15rpx;
	  height: 15rpx;
	  background: #1d24dd;
	  position: absolute;
	  border-radius: 50%;
	  left: 34rpx;
	  top: 34rpx;
	
	}
	.input-left {
	  float: left;
	  font-size: 16px;
	  padding-left: 6px;
	}
	
	.input-right {
	  font-size: 16px;
	  float: right;
	}
	
	.table {
	  width: 100%;
	  /* height: 50vh; */
	  position: fixed;
	  bottom: 0;
	  background-color: white;
	}
	
	.table .tr {
	  width: 100%;
	  display: flex;
	}
	.table .table-title{
	  text-align: center;
	  padding: 30rpx 0;
	  border-bottom: 1px solid #e5e5e5;
	  font-family: PingFang SC;
	  font-weight: 500;
	  font-size: 28rpx;
	  color: #666666;
	  line-height: 28rpx;
	  font-weight: bold;
	}
	.table-title-value{
	  color: #212121;
	  font-weight: 700;
	}
	.table .tr .td {
	  width: 25%;
	  height: 9vh;
	  font-family: "Microsoft YaHei";
	  font-weight: normal;
	  border-right: 1px solid #D9D9D9;
	  border-bottom: 1px solid #D9D9D9;
	  font-size: 21px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: #212121;
	}
	.table .tr .threetd {
	  width: 33%;
	  height: 9vh;
	  font-family: "Microsoft YaHei";
	  font-weight: normal;
	  border-right: 1px solid #D9D9D9;
	  border-bottom: 1px solid #D9D9D9;
	  font-size: 21px;
	  color: #424857;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.table .tr .zero{
	  width:66.3%
	}
	
	.keybord-return {
	  width: 20vw;
	  height: 12vh;
	  background: url('https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/common/i_del.png') no-repeat;
	  background-size: 2rem 1.5rem;
	  background-position: center;
	  filter: opacity(80%);
	}
	.pay {
	  color: #ffffff;
	  font-size: 0.3rem;
	  background-color: #212121;
	}
	.pay-disabled{
	  background-color: #f6f6f6;
	}
	.pay .a {
	  display: block;
	  position: relative;
	  width: 100%;
	  height: 100%;
	  color: #fff;
	  text-decoration: none;
	}
	.a-pay {
	    height: 27vh;
	    align-items: center;
	    justify-content: center;
	    display: flex;
	    font-size: 20px;
	}
	.pay-title{
	  color: #212121;
	  font-size: 36rpx;
	  font-weight: 700;
	}

</style>